<template>
    <div class="jianzhan-content">
        <Crumb name="Project"/>
        <div class="content">
            <Search>
                <el-button icon="el-icon-plus" type="primary"  size="small" class="input" @click="
                                        clear()
                                        dialogVisible = true
                                    ">Add Project</el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="projectList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        row-key="id"
                        border
                        stripe
                >
                    <el-table-column prop="projectName" label="Project Name"/>
                    <el-table-column prop="longitude" label="Longitude"/>
                    <el-table-column prop="latitude" label="Latitude"/>
                    <el-table-column prop="startTimeStr" label="Start Time"/>
                    <el-table-column prop="endTimeStr" label="End Time"/>
                    <el-table-column width="220">
                        <template slot-scope="equipment">
                            <el-button size="small" type="primary" @click="openDialog(equipment.row)">Modify</el-button>
                            <el-button size="small" type="danger" @click="deleteEquipment(equipment.row)">Delete</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination
                            background
                            :page-size="pageSize"
                            @current-change="changePage"
                            layout="prev, pager, next"
                            :total="total"/>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="Equipment" width="80%">
            <el-form label-width="150px">
                <el-form-item label="Project Name">
                    <el-input class="my-input" v-model="project.projectName"/>
                </el-form-item>
                <el-form-item label="Longitude">
                    <el-input class="my-input" v-model="project.longitude"/>
                </el-form-item>
                <el-form-item label="Latitude">
                    <el-input class="my-input" v-model="project.latitude"/>
                </el-form-item>
                <el-form-item label="Start Time">
                    <el-date-picker type="datetime" v-model="project.startTimeStr" class="my-input" value-format="yyyy-MM-dd hh:mm:ss"/>
                </el-form-item>
                <el-form-item label="End Time">
                    <el-date-picker type="datetime" v-model="project.endTimeStr" class="my-input" value-format="yyyy-MM-dd hh:mm:ss"/>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
        </el-dialog>

    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import Search from '../../components/common/search'
    import {getProject,deleteProject,addProject,modProject} from "../../api/service";
    import mixins from '../../util/mixins'
    import {ERROR_OK} from "../../util/config";


    export default {
        name: "project",
        mixins: [mixins],
        data() {
            return {
                projectList:[],
                plateList:[],
                dialogVisible:false,
                project:{
                    id:'',
                    projectName:'',
                    longitude:'',
                    latitude:'',
                    startTimeStr:'',
                    endTimeStr:''
                }
            }
        },
        created() {
            this.getProject();
        },
        methods: {
            async deleteEquipment(equipment){
                this.$confirm(
                    'Do you want to delete this project?'
                ).then(async ()=>{
                    const {status} = await deleteProject(equipment.id);
                    if (status === ERROR_OK) {
                        const id = this.projectList.findIndex(item => item.id === equipment.id);
                        this.projectList.splice(id,1);
                    }
                }).catch(()=>{
                    this.$notify.error('Fail to Delete ')
                })
            },
            async submitForm(){
                const { plateNum,longitude,latitude,projectName,startTimeStr,endTimeStr,id } = this.project;
                if (id) {
                    const {status } = await modProject({ plateNum,longitude,latitude,projectName,startTimeStr,endTimeStr,id });
                    if(status === ERROR_OK) {
                        this.$notify.success('Modify successfully');
                    } else {
                        this.$notify.error('Please Retry')
                    }
                } else {
                    const {status} = await addProject({plateNum,longitude,latitude,projectName,startTimeStr,endTimeStr});
                    if(status === ERROR_OK) {
                        this.$notify.success('Add successfully');
                        this.getProject()
                    } else {
                        this.$notify.error('Please Retry')
                    }
                }
                this.clear();
                this.dialogVisible = false
            },
            async getProject(){
                const {status,data} = await getProject();
                if(status === ERROR_OK) {
                    this.projectList = data;
                    this.total = data.length
                }
            },
            clear(){
                this.project = {
                    plateNum:'',longitude:'',latitude:'',projectName:'',startTimeStr:'',endTimeStr:'',id:''

                }
            },
            openDialog(item){
                this.project = item;
                this.dialogVisible = true
            },
            download(){
                const url = process.env.NODE_ENV === 'production' ? 'http://47.100.240.34:8093' : 'http://192.168.1.204:8080';
                window.open(url+`/statistical_report/export_excel.do?years=${this.years}&months=${this.months}`);
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content {
        @include content
    }
</style>